<template>
	<view>
		<view class="graphic-nav" :style="{
				background: value.backgroundColor,
				marginTop: value.marginTop * 2 + 'rpx',
				borderRadius: value.navRadius == 'fillet' ? '10rpx' : '0rpx'
			}">
			<block>
				<view class="nav-no-scroll flex justify-between">
					<view v-for="(item, index) in value.list" :key="index"
						class="text-item flex flex-column align-center" @click="redirectTo(item.link)">
						<view class="text-item-img" v-if="value.selectedTemplate == 'imageNavigation' && item.imageUrl">
							<image v-if="Number(item.imgWidth) >= Number(item.imgHeight)"
								:src="$util.img(item.imageUrl)" style="width:109rpx; height: 109rpx;" mode="aspectFit">
							</image>
							<image v-else :src="$util.img(item.imageUrl)"
								:style="{ width: (Number(item.imgWidth) / Number(item.imgHeight)) * 109 + 'rpx' }"
								style="height: 109rpx;"></image>
							<!-- <image :src="$util.img(item.imageUrl)" style="width: 109rpx; height: 109rpx;" mode="aspectFit"></image> -->
						</view>

						<text class="font-size-sub-1" v-if="item.title"
							:style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)'}">
							{{ item.title }}
						</text>
					</view>
				</view>
			</block>
		</view>
	    
	</view>
</template>

<script>
	// 图文导航
	import tabMenu1 from "@/static/image/home-menu/tab-menu-1.png"
	import tabMenu2 from "@/static/image/home-menu/tab-menu-2.png"
	import tabMenu3 from "@/static/image/home-menu/tab-menu-3.png"
	import tabMenu4 from "@/static/image/home-menu/tab-menu-4.png"
	export default {
		name: 'diy-graphic-nav',
		props: {
			value: {
				type: Object
			}
		},
		data() {
			return {
				pageWidth: '',
				tabMenuList: [tabMenu1, tabMenu2, tabMenu3, tabMenu4]
			};
		},
		created() {
			this.getWidth();
		},
		computed: {
			padding() {
				return this.value.padding == 0 ? 8 : this.value.padding;
			},
			isLogin() {
				return this.$store.state.isLogin || false;
			},
		},
		methods: {
			redirectTo(link) {
				const argumentsData = link.wap_url.split('?')[1];
				let needLogin = 0 ;
				if (argumentsData) {
					needLogin = this.$util.getUrlQueryString('needLogin', argumentsData);
				}
				if(!this.isLogin&&needLogin==1){
					this.$util.redirectTo("/otherpages/login/login/login", {
						back: '/pages/index/index/index'
					})
					return
				}
				this.$util.diyRedirectTo(link);
			},
			getWidth() {
				var self = this;
				//获取页面可用区域的宽度
				uni.getSystemInfo({
					success: res => {
						this.pageWidth = res.screenWidth;
					}
				});
			}
		}
	};
</script>

<style>
	.graphic-nav {
		overflow: hidden;
		padding: 0rpx 0;
	}

	.graphic-nav .nav-no-scroll {
		/* padding: 10rpx 0; */
		display: flex;
		flex-wrap: wrap;
		padding: 0 13rpx;
	}

	.graphic-nav .nav-no-scroll .text-item {
		padding: 9rpx 0 13rpx;
		width: 151rpx;
		height: 154rpx;
		box-sizing: border-box;
		border-radius: 14rpx;
	}

	.graphic-nav .nav-no-scroll .text-item-img {
		margin-bottom: 6rpx;
		height: 109rpx;
		width: 109rpx;
	}

	.graphic-nav .nav-no-scroll .text-item:nth-child(1) {
		background-color: #FFEDED;
	}

	.graphic-nav .nav-no-scroll .text-item:nth-child(2) {
		background-color: #FFF7E5;
	}

	.graphic-nav .nav-no-scroll .text-item:nth-child(3) {
		background-color: #F4EDFF;
	}

	.graphic-nav .nav-no-scroll .text-item:nth-child(4) {
		background-color: #E8EFFF;
	}

	/* .graphic-nav .nav-no-scroll .text-item .text-item-img {
	width: 90rpx;
	height: 90rpx;
	line-height: 90rpx;
	display: inline-block;
} */

	.graphic-nav .nav-no-scroll .text-item image {
		/* margin-bottom: 10rpx; */
		/* width: 100%; */
	}


	.graphic-nav .nav-no-scroll .text-item text {
		font-size: 24rpx;
		color: #111111;
		line-height: 22rpx;
	}

	.graphic-nav .nav-no-scroll .text-item .font-size-sub-1 {
		font-size: 24rpx;
		color: #111111 !important;
	}

	.graphic-nav .nav-scroll {
		white-space: nowrap;
		width: 100%;
	}

	.graphic-nav .nav-scroll .text-item {
		display: inline-block;
		width: 20%;
		text-align: center;
	}

	.graphic-nav .nav-scroll .text-item image {
		width: 80%;
	}

	.graphic-nav .nav-scroll .text-item text {
		display: block;
	}

	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
	}
</style>
